<template>
    <el-drawer
        v-model="isShow"
        :title="title"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >

        <el-form
            ref="queryFormRef"
            :model="queryForms"
            label-width="auto"
            label-position="left"
            :rules="queryFormRules"
        >
            <el-form-item label="任务名称：" required prop="taskname">
                <el-input v-model="queryForms.taskname"/>
            </el-form-item>
            <el-form-item label="任务下发人：" required>
                <el-input v-model="queryForms.adduserName" disabled/>
            </el-form-item>
            <el-form-item label="任务接收人：" required prop="receiverId">
                <!-- 防止张唧唧说又要，先注视 -->
                <!--                <el-select-->
                <!--                    multiple-->
                <!--                    placeholder="Select"-->
                <!--                    @click="departmentUserSelectRef.showSelect('选择任务接收人')"-->
                <!--                >-->
                <!--                    &lt;!&ndash;                    <el-option&ndash;&gt;-->
                <!--                    &lt;!&ndash;                        v-for="item in options"&ndash;&gt;-->
                <!--                    &lt;!&ndash;                        :key="item.value"&ndash;&gt;-->
                <!--                    &lt;!&ndash;                        :label="item.label"&ndash;&gt;-->
                <!--                    &lt;!&ndash;                        :value="item.value"&ndash;&gt;-->
                <!--                    &lt;!&ndash;                    />&ndash;&gt;-->
                <!--                </el-select>-->

                <UserSearchSelect v-model="queryForms.receiverId"/>
            </el-form-item>
            <el-form-item label="任务下发时间：" required prop="adddate">
                <el-date-picker
                    v-model="queryForms.adddate"
                    type="datetime"
                    placeholder="请选择任务下发时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
            </el-form-item>
            <el-form-item label="任务内容：" required prop="taskcontent">
                <el-input v-model="queryForms.taskcontent" type="textarea" :rows="3"/>
            </el-form-item>
            <el-form-item label="接收时间：">
                <el-input v-model="queryForms.receivedate" :disabled="!disabled"/>
            </el-form-item>
            <el-form-item label="任务处理时间：">
                <el-input v-model="queryForms.handledate" :disabled="!disabled"/>
            </el-form-item>
            <el-form-item label="任务处理情况：">
                <el-input v-model="queryForms.treatment" :disabled="!disabled"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="updateTaskHandle(queryFormRef)" v-if="isEditStatus">更新</el-button>
            <el-button type="primary" @click="createTaskHandle(queryFormRef)" v-else>发布</el-button>
            <el-button @click="changeShowStatus">取消</el-button>
        </template>
    </el-drawer>

    <DepartmentUserSelect ref="departmentUserSelectRef"/>
</template>

<script setup>
import {useTemplateRef} from "vue";
import useUserStore from "@/store/modules/user.js";
import {
    addEmergencyActionTask,
    getTaskInfoByTaskId,
    updateEmergencyActionTask
} from "@/api/FireAction/ExecuteFireAction.js";
import DepartmentUserSelect from "@/components/DepartmentUserSelect/DepartmentUserSelect.vue";
import UserSearchSelect from "@/components/UserSearchSelect/UserSearchSelect.vue";

const emit = defineEmits(['refresh-list'])

const isShow = ref(false)
const title = ref('任务发布')
// 是否是编辑状态
const isEditStatus = ref(false)

// 是否禁用
const disabled = ref(false)
const userStore = useUserStore()
const {userId, userName} = userStore.info
const defaultQueryForms = {
    // 应急处置 ID
    managementId: '',
    // 任务 ID
    taskId: '',
    // 任务名称
    taskname: '',
    // 任务下发人
    adduserId: userId,
    adduserName: userName,
    // 任务接收人
    receiverId: '',
    // 任务下发时间
    adddate: '',
    // 任务内容
    taskcontent: '',
    // 接收时间
    receivedate: '',
    // 任务处理时间
    handledate: '',
    // 任务处理情况
    treatment: ''
}
const queryForms = ref({...defaultQueryForms})
const queryFormRef = useTemplateRef('queryFormRef')
const departmentUserSelectRef = useTemplateRef('departmentUserSelectRef')

const queryFormRules = reactive({
    taskname: [
        {required: true, message: '请输入任务名称', trigger: 'blur'}
    ],
    receiverId: [
        {required: true, message: '请选择任务接收人', trigger: 'blur'}
    ],
    adddate: [
        {required: true, message: '请选择任务下发时间', trigger: 'blur'}
    ],
    taskcontent: [
        {required: true, message: '请输入任务内容', trigger: 'blur'}
    ],
})
// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
    if (!isShow.value) {
        queryForms.value = {...defaultQueryForms}
        isEditStatus.value = false
    }
}

const showAddExecuteFireActionTask = (managementId) => {
    changeShowStatus()
    queryForms.value.managementId = managementId
    title.value = '任务发布'
}

const showEditExecuteFireActionTask = (data) => {
    changeShowStatus()
    const {task_id, management_id} = data
    queryForms.value.taskId = task_id
    queryForms.value.managementId = management_id
    title.value = '任务编辑'
    isEditStatus.value = true
    getTaskDetail()
}

defineExpose({showAddExecuteFireActionTask, showEditExecuteFireActionTask})

// 创建任务
const createTaskHandle = async (elForm) => {
    if (!elForm) return
    await elForm.validate(async (valid, fields) => {
        if (valid) {
            // console.log(JSON.stringify(queryForms.value))
            await addEmergencyActionTask(queryForms.value)
            changeShowStatus()
            emit('refresh-list')
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 更新任务
const updateTaskHandle = async (elForm) => {
    if (!elForm) return
    await elForm.validate(async (valid, fields) => {
        if (valid) {
            await updateEmergencyActionTask(queryForms.value)
            changeShowStatus()
            emit('refresh-list')
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 获取任务详情
const getTaskDetail = async () => {
    const res = await getTaskInfoByTaskId(queryForms.value.taskId)
    queryForms.value = {
        ...queryForms.value,
        ...res.data
    }
    // console.log('任务详情', res.data, JSON.stringify(queryForms.value))
}

</script>

<style scoped lang="scss">

</style>